<template>
  <el-form ref="aForm" :model="userInfo" :rules="aRules" :label-position="labelPosition">
    <el-form-item :label="$t('AbpAccount[\'DisplayName:Name\']')" prop="name">
      <el-input v-model="userInfo.name" />
    </el-form-item>
    <el-form-item :label="$t('AbpAccount[\'DisplayName:Email\']')" prop="email">
      <el-input v-model="userInfo.email" />
    </el-form-item>
    <el-form-item :label="$t('AbpAccount[\'DisplayName:UserName\']')" prop="userName">
      <el-input v-model="userInfo.userName" />
    </el-form-item>
    <el-form-item :label="$t('AbpAccount[\'DisplayName:PhoneNumber\']')">
      <el-input v-model="userInfo.phoneNumber" />
    </el-form-item>
    <el-form-item :label="$t('userCard.personalIntroduction')">
      <el-input
        v-model="userInfo.extraProperties.Introduction"
        type="textarea"
        :rows="2"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit(aForm)">{{
        $t("AbpAccount['Submit']")
      }}</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import { translateRouteTitleI18n, getI18N } from "@/utils/i18n";
import i18n from "@/lang/index";
import { UserForm } from "@/api/user/types";
import { useUserStore } from "@/store/modules/user";

const props = defineProps({
  user: {
    type: Object,
    default: () => {
      return {
        name: "",
        userName: "",
        email: "",
        avatar: "",
        role: "",
        phoneNumber: "",
        extraProperties: {
          Introduction: "",
          Avatar: null,
        },
      };
    },
  },
});
const labelPosition = ref<"top" | "right" | "left">("top");
const loading = ref(false);
const aRules = reactive<FormRules>({
  name: [
    {
      required: true,
      message: i18n.global.t("AbpAccount['ThisFieldIsRequired.']"),
      trigger: ["blur", "change"],
    },
  ],
  email: [
    {
      required: true,
      message: i18n.global.t("AbpAccount['ThisFieldIsRequired.']"),
      trigger: ["blur", "change"],
    },
  ],
  UserName: [
    {
      required: true,
      message: i18n.global.t("AbpAccount['ThisFieldIsRequired.']"),
      trigger: ["blur", "change"],
    },
  ],
  phoneNumber: [
    {
      required: true,
      message: i18n.global.t("AbpAccount['ThisFieldIsRequired.']"),
      trigger: ["blur", "change"],
    },
  ],
});

const userInfo = toReactive<any>(props.user);
userInfo.extraProperties = {
  Introduction: "",
  Avatar:null
};
const aForm = ref<any>({});
const userStore = useUserStore();
async function submit(formEl: FormInstance | undefined) {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      loading.value = true;
      userStore
        .setUserInfo(userInfo as UserForm)
        .then(() => {
          //console.log("res", res);
          ElNotification({
            title: i18n.global.t("actionTiP.title"),
            message: i18n.global.t("actionTiP.update"),
            type: "success",
            duration: 2000,
          });
        })
        .catch(() => {
          debugger;
        })
        .finally(() => {
          loading.value = false;
        });
    }
  });
}

onMounted(() => {
  // console.log("PersonalSetting", userInfo);
});

watch(
  () => userStore.avatar,
  (newValue, oldValue) => {
    userInfo.extraProperties.Avatar = newValue;
  }
);
</script>
